budgetThird = 1;
(async function() {
	let rateparams = {
		username: getUsername,
		budgetYear: localStorage.getItem("year"),
		budgetMonth: localStorage.getItem("month"),
		dept: localStorage.getItem("dept"),
		status: 2,
		chartPage: 70404,
		chartNo: 5
	}
	await $.get(
		`${API_URL}getdata`, {
			...rateparams
		},
		function(res) {
			let re = eval("(" + res + ")");
			console.log(re)
			let data = re.items[0].charts[0].data;
			document.querySelector('.vessel .aside').innerHTML = `
								<div class="budget">
									<h3>支出预算总额</h3>
									<h2>${(data[0].key04)}<span>万元</span></h2>
								</div>
								<div class="statistics">
									<h4>执行总额</h4>
									<h3>${(data[0].key06)}<span>万元</span></h3>
								</div>
								<div class="statistics">
									<h4>剩余总额</h4>
									<h3>${(data[0].key05)}<span>万元</span></h3>
								</div>
								<div class="statistics">
									<h4>执行率</h4>
									<h3>${data[0].key10}%</h3>
									<div class="progress-bar">
										<div style="width: ${data[0].key10 > 100?100:data[0].key10}%;" class="progress ${data[0].key10>100?'over':''}"></div>
									</div>
								</div>`
			let lis = '';
			for (const item of data) {
				if (item.key02 === data[0].key01) {
					lis += `<li data-id= "${item.key01}">
											<div class="title">
												<h3>${item.key03}</h3>
												`
					lis += item.key11 === '1' ? '' : `<a>
													<img src="assets/images/departmental-charge/right.svg">
												</a>`
					lis += `</div>
											<div><div class="rate">
												<div class="chart">
													<svg><circle cx="35" cy="35" r="32" stroke="#E2E2EA"  stroke-width="2" fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" /><circle cx="35" cy="35" r="32" stroke="${item.key10>100?'#F53F3F':'#0062FF'}" stroke-width="5" fill="none" stroke-dasharray="${Math.PI * 64}" stroke-dashoffset="${Math.PI * 64 * ((100 - item.key10)<0?0:(100 - item.key10)/100)}" stroke-linecap="round" /></svg><span>${item.key10}%</span></div><p>执行率</p>
											</div>
											<div class="statistics">
												<h4>预算金额</h4>
												<h3>${(item.key04)}<span>万元</span></h3>
											</div>
											<div class="statistics">
												<h4>执行金额</h4>
												<h3>${(item.key06)}<span>万元</span></h3>
											</div>
											<div class="statistics">
												<h4>剩余金额</h4>
												<h3>${(item.key05)}<span>万元</span></h3>
											</div></div>
										</li>`
				}

			}

			document.querySelector('.vessel .main ul').innerHTML = lis
			document.querySelectorAll('.vessel .main ul li')[0].classList.add('active')
			localStorage.setItem("budgetID", document.querySelectorAll('.vessel .main ul li')[0].dataset.id)
			localStorage.setItem("budgetPPID", data[0].key01)
		}
	)

	getratestate()

	function getratestate() {
		$.get(
			`${API_URL}getdata`, {
				...rateparams,
				chartPage: 70402,
				budgetNo: localStorage.getItem("budgetID"),
				chartNo: 3

			},
			function(res) {
				let re = eval("(" + res + ")");
				document.querySelector('.vessel .main .item-detail .state .p').innerHTML = re.items[0]
					.charts[0].data.length > 0 ? re.items[0].charts[0].data[0].key01 : ''

			})
	}

	const lis = document.querySelectorAll('.vessel .main ul li');
	for (const li of lis) {
		li.addEventListener('click', function(e) {
			localStorage.setItem("budgetID", this.dataset.id)
			if (e.target.tagName === 'IMG') {
				localStorage.setItem("budgetPID", this.dataset.id)
				window.location.href = 'budget-enforcement-fourth.html';
				return
			}
			document.querySelector('.vessel .main ul li.active').classList.remove('active')
			this.classList.add('active');

			getMonPayComplete()
			getratestate()
		})

	}

	//月度到款执行
	getMonPayComplete()

	function getMonPayComplete() {
		$.get(
			`${API_URL}getdata`, {
				...rateparams,
				budgetNo: localStorage.getItem("budgetID"),
				chartPage: 70402,
				chartNo: 2

			},
			function(res) {
				let re = eval("(" + res + ")");
				console.log(re)
				let data = re.items[0].charts[0].data;
				if (data.length === 0) {
					if (document.querySelector('#monthlj')) {
						document.querySelector('#monthlj') && document.querySelector('#monthlj').remove()
						document.querySelector('.month').innerHTML += `<div class="nowrap">
										<div class="noData">
											<img src="assets/images/mask/budget-All-IncomingPayment.svg" >
											<p>暂无数据</p>
										</div>
									</div>`
					}
					return
				}
				if (document.querySelector('.nowrap')) {
					document.querySelector('.nowrap').remove();
					document.querySelector('.month').innerHTML += `<div id="monthlj"></div>`
				}
				let xData = [];
				let currYearTotal = [];
				let currYearBudget = [];
				let increase = [];
				let legendData = ["预算金额", "执行金额", "执行率"];

				for (var i = 0; i < data.length; i++) {
					xData.push(+data[i].key01);
					currYearTotal.push(data[i].key02);
					currYearBudget.push(data[i].key03);
					increase.push(data[i].key04);
				}

				let Data = [{
						name: "预算金额",
						type: "bar",
						barWidth: '30%',
						barGap: 0,
						itemStyle: {
							color: "#165DFF",
						},
						data: currYearTotal,
					},
					{
						name: "执行金额",
						type: "bar",
						barWidth: '30%',
						barGap: 0,
						itemStyle: {
							color: "#50CD89",
						},
						data: currYearBudget,
					},
					{
						name: "执行率",
						type: "line",
						barWidth: "13",
						barGap: 0,
						yAxisIndex: 1,
						itemStyle: {
							color: "#7239EA",
						},
						data: increase,
					},
				];

				have("monthlj") ? mulitYBar("monthlj", xData, legendData, Data) : "";
			})

	}


	document.querySelector('.vessel .main .item-detail .state div img').onclick = function() {
		document.querySelector(
				'.vessel .main .item-detail .state div .mask-content textarea').value = document
			.querySelector('.vessel .main .item-detail .state .p').innerText
		toggle()
	}


	document.querySelector('.edit .mask-content .btn button.cancle').onclick = function() {
		toggle()
	}

	function toggle() {
		document.querySelector('.edit .mask-position').style.display = document.querySelector(
			'.edit .mask-position').style.display !== 'block' ? 'block' : 'none'
	}


	document.querySelector('.edit .mask-content .btn button.save').onclick = () => {
		$.get(
			`${API_URL}getdata`, {
				...rateparams,
				chartNo: 4,
				chartPage: 70402,
				budgetNo: localStorage.getItem("budgetID"),
				key01: document.querySelector(
					'.vessel .main .item-detail .state div .mask-content textarea').value
			},
			function(res) {
				let re = eval("(" + res + ")");
				alert(re.items[0].charts[0].chart_name)
				getratestate()
				toggle()
			})
	}
})()
